<template>
	<view>
		<map id="myMap" @labeltap="markertap" @markertap="markertap" subkey="WKHBZ-V5ZCU-7ODVC-BGXDB-HNV7J-KQBMP" layer-style="1" :markers="markers" :polyline="polyline" style="width:100%;height:100vh;" :longitude="longitude"
		 :latitude="latitude" :scale='scale'>
		</map>
		<view v-if="orderList.length>0" class="map-tools">
			<view class="my-location">
				<image @click="topUser" class="left" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-f98a7cf9-5eeb-481f-bdc8-9446da5f5666/0f8e4a5a-7b3b-428a-b12b-dde06d915747.png" mode=""></image>
				<view class="right">
					<text class="title">客户（{{fastLocation.addressInfo.userName||'查询中..'}}）离您最近</text>
					<text class="text">距离您{{fastLocation.distance_str||'...'}}</text>
				</view>
			</view>
			
			<swiper v-if="orderInfo.images.length>0" class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1500">
				<swiper-item v-for="(item,index) in orderInfo.images" :key="index">
					<image @click="previewImage(orderInfo.images,index)" :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="start-place">
				<view class="place">
					<text class="title">{{fastLocation.publicGive?"公益赠送":"物品回收"}}{{getWeightContent(fastLocation.garbageWeight)}}</text>
					<text class="text">{{fastLocation.appointTime}}</text>
				</view>
				<view class="tip">{{fastLocation.addressDesc}}</view>
				<button @tap="submitAdress" class="sure" type="primary">确认接单</button>
			</view>
		</view>
		<view v-else class="map-tools">
			<view class="start-place">
				<view class="place">
					<text class="title">附近暂无订单</text>
					<text class="text">您可以稍后再试</text>
				</view>
				<view class="tip">师傅们辛苦啦。。</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getDistances} from '../../common/utils.js'
	var QQMapWX = require('../../common/qqmap-wx-jssdk.js')
	var demo = new QQMapWX({
		key: 'RHXBZ-TCACV-UPTP5-UPTJE-7DJRZ-A6B5Z'
	})
	export default {
		data() {
			return {
				markers: [],
				polyline:[],
				orderList:[],
				scale:14,
				fastLocation:{addressInfo:{}},
				latitude: 33.404659,
				longitude: 115.089099
			}
		},
		async onShow() {
			this.clearData()
			//定位地址
			uni.getLocation({
				success:async data => {
					this.$api("user-center","updateUser",{locationInfo:data})
					this.longitude=data.longitude
					this.latitude=data.latitude
					this.markers.push({
						title: "自己(目前位置)",
						id: 0,
						width:35,
						height:35,
						latitude: data.latitude,
						longitude: data.longitude,
						label:{content:"自己(目前位置)",color:"#1aad19"},
						iconPath: "../../../../../static/somePeo.png"
					})
					let res=await this.$api("recovery-order","getAll",{state:[0]})
					this.orderList=res.data
					res.data.forEach((v,i)=>{
						let dis=getDistances(this.latitude,this.longitude,v.addressInfo.latitude,v.addressInfo.longitude)
						if(this.fastLocation.distance){
							if(this.fastLocation.distance>dis.distance){
								this.fastLocation={...v,...dis}
							}
						}else{
							this.fastLocation={...v,...dis}
						}
						this.markers.push({
							title: (v.publicGive?"公益赠送":"物品回收")+this.getWeightContent(v.garbageWeight)+"\n"+v.appointTime,
							label:{content:"客户("+v.addressInfo.userName+")",color:"#1aad19"},
							id: 1+i,
							latitude: v.addressInfo.latitude,
							longitude: v.addressInfo.longitude,
							width:30,
							height:30,
							iconPath: "../../../../../static/mainPeo.png"
						})
					})
					if(res.data.length>0){
						this.topUser()
					}
				}
			})
		},
		methods: {
			markertap(e){
				if(e.markerId!=0){
					let temp=this.orderList[e.markerId-1]
					let dis=getDistances(this.latitude,this.longitude,temp.addressInfo.latitude,temp.addressInfo.longitude)
					this.fastLocation={...temp,...dis}
					this.topUser()
				}
			},
			clearData(){
				this.markers=[]
				this.polyline=[]
				this.orderList=[]
				this.fastLocation={addressInfo:{}}
			},
			topUser() {
				let vm = this;
				//只测试距离使用 calculateDistance
				demo.direction({
					mode:'bicycling', //可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
					//from参数不填默认当前地址
					from:this.latitude+','+this.longitude,
					to: vm.fastLocation.addressInfo.latitude+","+vm.fastLocation.addressInfo.longitude,
					success: res => {
						let ret = res;
						let coors = ret.result.routes[0].polyline;
						let distance = ret.result.routes[0].distance;
						if(distance>1000){
							vm.dis = (distance/1000).toString().substr(0,3)+"km"
						}else{
							vm.dis = distance+"m"
						}
						
						if(distance>100000){
							vm.scale = 4
						}else  if(distance>60000){
							vm.scale = 6
						}else if(distance>20000){
							vm.scale = 8
						}else if(distance>10000){
							vm.scale = 11
						}else if(distance>5000){
							vm.scale = 12
						}else if(distance>1000){
							vm.scale = 13
						}
						let pl = [];
						let kr = 1000000;
						//坐标解压（返回的点串坐标，通过前向差分进行压缩）
						for (var i = 2; i < coors.length; i++) {
							coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
						}
						//将解压后的坐标放入点串数组pl中
						for (var i = 0; i < coors.length; i += 2) {
							pl.push({
								latitude: coors[i],
								longitude: coors[i + 1]
							})
						}
						vm.latitude = pl[0].latitude
						vm.longitude = pl[0].longitude
						vm.polyline = [{
							points: pl,
							color: '#1aad19',
							width: 4
						}]
						let tops = pl[pl.length-1]
					}
					
				})
			},
			
			submitAdress(){
				uni.navigateTo({
					url:"../adminorder/order-desc?id="+this.fastLocation._id
				})
			},
			getWeightContent(weight){
				switch(weight){
					case "1": return "10-50公斤"
					break;
					case "2" : return "50-100公斤"
					break;
					case "3" : return "100公斤以上"
					break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.map-tools{
			position: fixed;
			width: 100%;
			bottom: 30rpx;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.my-location{
				width: 90%;
				margin: 0 auto;
				height: 120rpx;
				box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.2);
				background: #fff;
				border-radius: 20rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				overflow: hidden;
				.left{
					background: #31b977;
					// flex: 20%;
					width: 120rpx;
					height: 100%;
				}
				.right{
					margin-left: 20rpx;
					color: #111;
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					flex-direction: column;
					.title{
						font-size: 28rpx;
						font-weight: bold;
					}
					.text{
						font-size: 26rpx;
						overflow: hidden;
						white-space:nowrap;
						text-overflow: ellipsis;
						color: #31b977;
						margin-top: 10rpx;
					}
				}
			}
			
			.start-place{
				width: 85%;
				margin: 0 auto;
				margin: 0 auto;
				margin-top: 20rpx;
				box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.2);
				background: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				.place{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.title{
						font-size: 28rpx;
						font-weight: bold;
						color: #111;
					}
					.text{
						font-size: 28rpx;
						color: #31b977;
						font-weight: bold;
						display: inline-block;
						overflow: hidden;
						white-space:nowrap;
						text-overflow: ellipsis;
					}
				}
				.tip{
					font-size: 22rpx;
					color: #666;
					margin-top: 15rpx;
				}
				.sure{
					margin-top: 15rpx;
					color: #FFFFFF;
					background: #31b977;
					font-weight: blod;
					font-size: 32rpx;
				}
				
			}
		}
	
</style>
